<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Ejercicio 4</title>
	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
	<style type="text/css">

	form {
		display: block;
		margin: 0 auto;
		margin-top: 5%;
		max-width: 450px;
	}

	label {
		display: block;
		margin: 15px;
	}

	input {
		margin-left: 10px;
	}

	.cuadro {
		float: right;
		margin-left: 5px;
		width: 300px;
	}

	#radios {
		width: 310px;
		float: right;
		margin-left: 0px;
	}

	.r {
		display: inline;
		margin: 0px;
		margin-right: 20px;
	}

	#boton {
		display: block;
		margin: 0 auto;
		margin-top: 20px;
		max-width: 230px;
	}

	#metodo {
		display: block;
		margin: 15px;
	}

	</style>
	<script type="text/javascript">
	var nombre, apellido, numero, telefono;
	var busqueda = 0;

	function volver() {
		location.replace("index.php");
	}

	function enviar() {
		telefono = document.getElementById("telefono").value;

		if (busqueda == 0) {
			nombre = document.getElementById("nombre").value;
			apellido = document.getElementById("apellido").value;		

			if (nombre == "" || nombre.length > 30) {
				alert("El nombre no es correcto");
			} else if  (apellido == "" || apellido.length > 50) {
				alert("El apellido no es correcto");
			} else if (telefono == "" || telefono.length > 11 || isNaN(telefono)) {
				alert("El teléfono no es correcto");
			} else {
				var consulta = "js=una&nombre="+nombre+"&apellido="+apellido+"&telefono="+telefono;
				actualizar(consulta);
			}
		} else {
			numero = document.getElementById("numero").value;

			if (isNaN(numero)) {
				alert("El número de empelado no es correcto");
			} if (telefono == "" || telefono.length > 11 || isNaN(telefono)) {
				alert("El teléfono no es correcto");
			} else {
				var consulta = "js=une&numero="+numero+"&telefono="+telefono;
				actualizar(consulta);
			}
		}

	}

	function actualizar(consulta) {
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("POST", "control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send(consulta);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				var respuesta = xmlhttp.responseText;
				if (respuesta == "true") {
					alert("Empleado actualizado correctamente");
					limpiar();
				} else if (respuesta == "false") {
					alert("El empleado no existe");
				} else if (respuesta == "Error de conexión") {
					alert(respuesta);
				} else {					
					alert("Error grave\r\n"+respuesta);
				}
			}
		}

	}

	function limpiar() {

		if (busqueda == 0) {
			document.getElementById("nombre").value = "";
			document.getElementById("apellido").value = "";
		} else {
			document.getElementById("numero").value = "";
		}
		document.getElementById("telefono").value = "";
		
	}

	function ajax(opcion) {
		var texto = document.getElementById("cambio");

		if (opcion == 0) {
			texto.innerHTML = '<label>Nombre<input type="text" id="nombre" class="cuadro"></label>\r\n';
			texto.innerHTML += '<label>Apellido<input type="text" id="apellido" class="cuadro"></label>\r\n';
			busqueda = 0;
		} else {
			texto.innerHTML = '<label>NumEmp<input type="text" id="numero" class="cuadro"></label>';
			busqueda = 1;
		}

	}

	</script>
</head>
<body>

	<form name="formulario">
		<fieldset>
			<legend>Acualización de Empleados</legend>
			<div id="metodo">
				Selección
				<div id="radios">
					<label class="r"> <input type="radio" name="opcion" onclick="ajax(0)" checked='checked'>Nombre y apellido</label>
					<label class="r"> <input type="radio" name="opcion" onclick="ajax(1)">NumEmp</label>
				</div>
			</div>
			<span id="cambio">
				<label>Nombre<input type="text" id="nombre" class="cuadro"></label>
				<label>Apellido<input type="text" id="apellido" class="cuadro"></label>
			</span>
			<label>Teléfono<input type="text" id="telefono" class="cuadro"></label>

			<div id="boton">
				<input type="button" value="Actualizar" onclick="enviar()">
				<input type="button" value="Cancelar y volver" onclick="volver()">
			</div>
		</fieldset>
	</form>
</body>
</html>